<template>
    <view class="Wraper" :style="{ '--newcolor': info.bg_color, '--color': color, '--back-color': $common.hexToRgba(color, 0.1) }">
        <view class="navBar" :class="{ navBg: showBg }" :style="navBarStyle">
            <view class="barBox" :style="barBoxStyle">
                <view class="BackHome">
                    <view class="iconfont icon-fanhui white size38" @click="$back()"></view>
                </view>
                <view class="SeachBox">
                    <view class="Search">
                        <view class="iconfont icon-sousuokuang color_99 size30"></view>
                        <input type="text" v-model="query_text" @input="Input" @confirm="Search" class="searchTxt" placeholder="输入商品关键词" />
                    </view>
                </view>
            </view>
        </view>

        <image :src="$imgUrls(info.top_img)" mode="widthFix" class="rows"></image>

        <view class="tabBox">
            <scroll-view scroll-x="true" class="rows nowrap scrollView">
                <block v-for="(item, index) in listTab" :key="item.id">
                    <view class="list" :class="{ Active: item.id == classify_id }" :id="`list${index}`" @click="changTab(item, index)">
                        <image :src="item.img" mode="aspectFill" class="Img"></image>
                        <view class="name">{{ item.name }}</view>
                    </view>
                </block>
            </scroll-view>
        </view>

        <view class="Wrapper">
            <view class="listData" v-for="(item, index) in pageData" :key="item.goods_id">
                <store-product
                    class="store-product"
                    v-if="item.buy_verification == 0"
                    :product-id="item.product_id"
                    :appid="item.shop_appid"
                    :product-promotion-link="item.upTeamData.promotion_link"
                ></store-product>
                <view class="popCenter" v-else @click="toShop(item)"></view>
                <view class="Liin">
                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="Img"></image>
                    <view class="content">
                        <text class="title ellipsis_2">{{ item.name }}</text>
                        <view class="Bot">
                            <view class="Info">
                                <view class="d-flex a-center color_ff4 bold">
                                    <text class="size26 m-top4">￥</text>
                                    <text class="size36">{{ item.price }}</text>
                                </view>
                                <text class="dre" v-if="item.profitTitle">{{ item.profitTitle }}</text>
                            </view>
                            <view class="Gift">
                                <view class="iconfont icon-a-2503 white size42"></view>
                                <text class="white size30 bold500">去送礼</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="row a-center m-top20" v-if="item.info">
                    <view class="iconfont icon-dianzan_kuai color_ff4 size32 m-right6"></view>
                    <text class="black size28 bold500">推荐理由：</text>
                    <view class="color_33 size28">{{ item.info }}</view>
                </view>
            </view>

            <view class="row j-centert p-top100" v-if="!pageData.length">
                <view class="iconfont icon-meiyoushuju size200 white"></view>
            </view>
        </view>

        <!-- <view class="footer">
            <view class="fotBox" @click="Unlock">分享好友 (解锁)</view>
        </view> -->
        <showModel @cancelFunc="cancelFunc" goHome="0" v-if="showModal" type="2" @showMol="showModal = true"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                id: 4985,
                classify_cate: 6,
                showModal: false,

                showBg: false,
                tabs: [
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/685133cd000e44e60993c5dac3ae311e000000a000004f50',
                        name: '送社群',
                        title: '古法炮制 九蒸九晒 食用黑芝麻丸 营养易吸收 270g装',
                        price: 79,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://store.mp.video.tencent-cloud.com/161/20304/snscosdownload/SH/reserved/67fcd93a000ce7222f9b8b80513f0315000000a000004f50',
                        name: '送朋友',
                        title: '新疆伊犁黑蜂蜜（条蜜便携装15g*10条/盒）',
                        price: 19.9,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/685237c300064767099570944b6b8809000000a000004f50',
                        name: '送对象',
                        title: '伊犁黑蜂蜂蜜（拍一发二）',
                        price: 19.9,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/685134a5000b05f20996bc0a97688809000000a000004f50',
                        name: '送客户',
                        title: '古法炮制 九蒸九晒 食用黑芝麻丸 营养易吸收 270g装',
                        price: 199,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/6851311d000db7fe093139d023fd1515000000a000004f50',
                        name: '送长辈',
                        title: '膜玲珑 眼部舒润喷雾',
                        price: 99,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    },
                    {
                        img: 'https://wst.wxapp.tc.qq.com/161/20304/snscosdownload/SZ/reserved/6851328300083d2609a7f5519d5e1815000000a000004f50',
                        name: '送同事',
                        title: '膜玲珑 芙蓉霜',
                        price: 99,
                        recom: '吸金纳福,财气随身贴',
                        dre: '省/赚￥0.67'
                    }
                ],
                current: 0,
                listTab: [],
                info: '',
                pageData: '',
                classify_id: 0,
                page: 1,
                limit: 10,
                getMore: false,
                query_text: ''
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            if (opt.classify_cate) this.classify_cate = opt.classify_cate;
            this.getClassifyInfo();
        },
        async onShow() {
            await Api.getUserBindInfo();
        },
        methods: {
            getClassifyInfo() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getClassifyInfo',
                        data: {
                            classify_cate: this.classify_cate,
                            id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.Data;
                        this.listTab = result.list;
                        this.info = result;
                        if (!result.list.length) return;
                        this.classify_id = result.list[0].id;
                        this.getClassifyGoodsList();
                    });
            },
            getClassifyGoodsList() {
                this.$http
                    .post({
                        url: '/weChatStoreApi/getClassifyGoodsList',
                        data: {
                            classify_id: this.classify_id,
                            page: this.page,
                            limit: this.limit,
                            query_text: this.query_text
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        result.length < this.limit ? (this.getMore = false) : (this.getMore = true);
                    });
            },

            changTab(item, index) {
                this.classify_id = item.id;
                this.init();
            },
            init() {
                this.page = 1;
                this.getMore = false;
                this.getClassifyGoodsList();
            },
            async toShop() {
                if (!this.vid) return (this.showModal = true);
                const reuslt = await this.$Modals('您还未授权成为推客', '授权成为推客后才可购买');
                if (reuslt) this.Business();
            },
            Business() {
                if (!this.openBusinessView.businessType) {
                    console.log('businessType为空');
                    this.$Toast('未获取到正确的商家信息');
                    return;
                }
                this.$pop.openBusinessView(this.openBusinessView.businessType, this.openBusinessView.queryString, this.extraData);
            },
            Search() {
                if (!this.query_text) return;
                this.init();
            },
            Input(event) {
                let value = event.detail.value;
                if (!value) this.init();
            },
            async cancelFunc() {
                this.showModal = false;
                await Api.getUserBindInfo();
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.getClassifyGoodsList();
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'System', 'navHeight', 'navWidth', 'vid', 'openBusinessView', 'extraData']),
            navBarStyle() {
                return `height:${this.totalHeight}px`;
            },
            barBoxStyle() {
                return `width:${this.navWidth}px;height:${this.navHeight}px`;
            }
        },

        onPageScroll(e) {
            let scrollTop = e.scrollTop;
            if (scrollTop >= 200) {
                this.showBg = true;
            } else {
                this.showBg = false;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Wraper {
        width: 100%;
        min-height: 100vh;
        background-color: var(--newcolor);

        padding-bottom: 30rpx;
    }
    .navBg {
        background-color: var(--newcolor);
    }
    .navBar {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .barBox {
            display: flex;
            align-items: center;
            .BackHome {
                width: 100rpx;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .SeachBox {
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .Search {
                    width: 430rpx;
                    height: 90%;
                    background-color: #fff;
                    border: 1px solid #f1f1f1;
                    border-radius: 40rpx;
                    display: flex;
                    align-items: center;
                    padding: 0 20rpx;
                    .searchTxt {
                        flex: 1;
                        height: 100%;
                        font-size: 28rpx;
                        color: #000;
                        padding-left: 10rpx;
                    }
                }
            }
        }
    }

    .tabBox {
        width: 100%;

        .scrollView {
            width: 100%;
            .list {
                display: inline-block;
                margin-left: 24rpx;
                margin-right: 10rpx;
                text-align: center;

                .Img {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 34rpx;
                    transition: all 0.3s;
                }
                .name {
                    color: #fff;
                    font-size: 26rpx;
                    margin-top: 20rpx;
                    padding: 4rpx 10rpx;
                    border-radius: 30rpx;
                    transition: all 0.3s;
                }
            }
            .list:last-child {
                margin-right: 20rpx;
            }
            .Active {
                .Img {
                    width: 120rpx;
                    height: 120rpx;
                }

                .name {
                    color: var(--newcolor);
                    background-color: #fff;
                    font-weight: 500;
                }
            }
        }
    }
    .Wrapper {
        width: 100%;
        margin-top: 40rpx;
    }
    .listData {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
        margin: 0 auto 20rpx;
        position: relative;
        .store-product,
        .popCenter {
            width: 100%;
            height: 86%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            z-index: 11;
            opacity: 0;
        }
        .Liin {
            width: 100%;
            // height: 300rpx;
            display: flex;
            .Img {
                width: 230rpx;
                height: 230rpx;
                border-radius: 10rpx;
                margin-right: 14rpx;
            }
            .content {
                flex: 1;
                height: 230rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title {
                    color: #333;
                    font-size: 30rpx;
                    font-weight: bold;
                }
                .Bot {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .Info {
                        display: flex;
                        flex-direction: column;
                        .dre {
                            color: #c08133;
                            font-size: 24rpx;
                            margin-top: 10rpx;
                        }
                    }
                    .Gift {
                        width: 170rpx;
                        height: 70rpx;
                        background-color: #fd6045;
                        border-radius: 10rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }
    .footer {
        width: 100%;
        height: 120rpx;
        background-color: var(--newcolor);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        .fotBox {
            width: 710rpx;
            height: 80rpx;
            background-color: #fff;
            border-radius: 40rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36rpx;
            color: var(--newcolor);
            font-weight: bold;
        }
    }
</style>
